<script setup lang="ts">
  import { ref, watch, computed, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { Notification } from '@arco-design/web-vue';
  import {
    searchSortingTable,
    searchReceiveTable,
    updateOnlineStatus,
    updateOfflineStatus,
    deleteConsole,
  } from '@/api/system-basic';

  const columns1: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      align: 'center',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '分拣台名称',
      dataIndex: 'CONSOLENAME',
    },
    {
      title: '分拣台IP地址',
      dataIndex: 'CONSOLEIP',
    },
    {
      title: '缓存箱叫箱位置',
      dataIndex: 'CONSOLECALLBYWORKBIN',
    },
    {
      title: '工作状态',
      dataIndex: 'CONSOLESTATUS',
    },
    {
      title: '最大缓存箱工作数量',
      dataIndex: 'CONSOLEWORKBINMAXQUANTITY',
    },
    {
      title: '工作器具包叫箱位置',
      dataIndex: 'CONSOLECALLBYTOOL',
    },
    {
      title: '最大工作器具包工作数量',
      dataIndex: 'CONSOLETOOLMAXQUANTITY',
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      align: 'center',
      fixed: 'right',
    },
  ];
  const columns2: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      align: 'center',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '接收台名称',
      dataIndex: 'CONSOLENAME',
    },
    {
      title: 'IP地址',
      dataIndex: 'CONSOLEIP',
    },
    {
      title: '缓存箱叫箱地址',
      dataIndex: 'CONSOLECALLBYWORKBIN',
    },
    {
      title: '工作状态',
      dataIndex: 'CONSOLESTATUS',
    },
    {
      title: '缓存箱最大工作数量',
      dataIndex: 'CONSOLEWORKBINMAXQUANTITY',
    },
    {
      title: '操作',
      dataIndex: 'action',
      slotName: 'action',
      align: 'center',
      fixed: 'right',
    },
  ];

  const booleanStore = useBooleanStore();
  // 创建一个响应式的本地副本
  const sortingTableData = ref<any[]>([]);
  const receiveTableData = ref<any[]>([]);
  // 数据库一共有多少条
  const sortingTotal = ref<number>(1);
  const sortingPageNum = ref<number>(1);
  const sortingPageSize = ref<number>(10);
  const receiveTotal = ref<number>(1);
  const receivePageNum = ref<number>(1);
  const receivePageSize = ref<number>(10);

  const flowQueryData1 = ref({
    pageParameter: computed(() => ({
      rows: sortingPageSize.value,
      page: sortingPageNum.value,
    })),
  });
  const flowQueryData2 = ref({
    pageParameter: computed(() => ({
      rows: receivePageSize.value,
      page: receivePageNum.value,
    })),
  });

  async function handleSearch() {
    const sortData = await searchSortingTable(flowQueryData1.value);
    const receiveData = await searchReceiveTable(flowQueryData2.value);
    sortingTableData.value = sortData?.responseBody?.result || [];
    sortingTotal.value = sortData?.responseBody.pageParameter?.totalCount || 0;
    receiveTableData.value = receiveData?.responseBody?.result || [];
    receiveTotal.value =
      receiveData?.responseBody.pageParameter?.totalCount || 0;
  }

  function sortingChange(e: any) {
    sortingPageNum.value = e;
  }
  function receiveChange(e: any) {
    receivePageNum.value = e;
  }
  function sortingChangeSize(e: any) {
    sortingPageSize.value = e;
  }
  function receiveChangeSize(e: any) {
    receivePageSize.value = e;
  }

  // 分拣台上线、
  async function editOnLine(item: any) {
    const info: any = {
      CONSOLENAME: item.CONSOLENAME,
      CONSOLEWORKBINMAXQUANTITY: item.CONSOLEWORKBINMAXQUANTITY,
      CONSOLETOOLMAXQUANTITY: item.CONSOLETOOLMAXQUANTITY,
      CONSOLECALLBYWORKBIN: item.CONSOLECALLBYWORKBIN,
      CONSOLECALLBYTOOL: item.CONSOLECALLBYTOOL,
      CONSOLEIP: item.CONSOLEIP,
      CONSOLEID: item.CONSOLEID,
      CONSOLESTATUS: item.CONSOLESTATUS,
    };
    const data = await updateOnlineStatus([info]);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: '分拣台上线成功',
        closable: true,
      });

      handleSearch();
    } else {
      Notification.error({
        title: '失败',
        content: '分拣台上线失败',
        closable: true,
      });
    }
  }
  // 分拣台下线、
  async function editOffLine(item: any) {
    const info: any = {
      CONSOLENAME: item.CONSOLENAME,
      CONSOLEWORKBINMAXQUANTITY: item.CONSOLEWORKBINMAXQUANTITY,
      CONSOLETOOLMAXQUANTITY: item.CONSOLETOOLMAXQUANTITY,
      CONSOLECALLBYWORKBIN: item.CONSOLECALLBYWORKBIN,
      CONSOLECALLBYTOOL: item.CONSOLECALLBYTOOL,
      CONSOLEIP: item.CONSOLEIP,
      CONSOLEID: item.CONSOLEID,
      CONSOLESTATUS: item.CONSOLESTATUS,
    };
    const data = await updateOfflineStatus([info]);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: '分拣台下线成功',
        closable: true,
      });

      handleSearch();
    } else {
      Notification.error({
        title: '失败',
        content: '分拣台下线失败',
        closable: true,
      });
    }
  }

  // 修改
  function sortingEdit(record: any) {
    const info: any = {
      CONSOLENAME: record.CONSOLENAME,
      CONSOLEWORKBINMAXQUANTITY: record.CONSOLEWORKBINMAXQUANTITY,
      CONSOLETOOLMAXQUANTITY: record.CONSOLETOOLMAXQUANTITY,
      CONSOLECALLBYWORKBIN: record.CONSOLECALLBYWORKBIN,
      CONSOLECALLBYTOOL: record.CONSOLECALLBYTOOL,
      CONSOLEIP: record.CONSOLEIP,
      CONSOLEID: record.CONSOLEID,
      CONSOLESTATUS: record.CONSOLESTATUS,
      CONSOLETYPE: '2',
    };
    booleanStore.setRow(info);
    booleanStore.toggleBool2(17);
  }
  function receiveEdit(record: any) {
    const info: any = {
      CONSOLENAME: record.CONSOLENAME,
      CONSOLEWORKBINMAXQUANTITY: record.CONSOLEWORKBINMAXQUANTITY,
      CONSOLETOOLMAXQUANTITY: record.CONSOLETOOLMAXQUANTITY,
      CONSOLECALLBYWORKBIN: record.CONSOLECALLBYWORKBIN,
      CONSOLECALLBYTOOL: record.CONSOLECALLBYTOOL,
      CONSOLEIP: record.CONSOLEIP,
      CONSOLEID: record.CONSOLEID,
      CONSOLESTATUS: record.CONSOLESTATUS,
      CONSOLETYPE: '1',
    };
    booleanStore.setRow(info);
    booleanStore.toggleBool2(17);
  }
  // 删除
  async function onDel(record: any) {
    const info: any = {
      data: [record.CONSOLEID],
    };
    const data = await deleteConsole(info);
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    booleanStore.watchUpdate(21);
  }
  // 监听页面变化
  watch(
    [sortingPageNum, sortingPageSize, receivePageNum, receivePageSize],
    () => {
      handleSearch();
    }
  );
  watch(
    () => booleanStore.update,
    () => {
      if (booleanStore.num6 === 21) handleSearch();
    }
  );
  onMounted(() => {
    handleSearch();
  });
</script>

<template>
  <a-card title="分拣台列表">
    <a-button type="primary" size="large" @click="handleSearch">查询</a-button>
    <!-- <a-button type="primary" class="btn-reset" size="large">分配任务</a-button> -->
    <a-button
      type="primary"
      class="btn-reset"
      size="large"
      @click="booleanStore.toggleBool(14)"
      >新增</a-button
    >
    <a-divider />
    <!-- 分拣台 -->
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns1"
      :data="sortingTableData"
    >
      <template #id="{ record }">{{
        sortingTableData.indexOf(record) + 1
      }}</template>
      <template #action="{ record }">
        <a-button type="text" class="font-color" @click="editOnLine(record)"
          >分拣台上线</a-button
        >
        <a-button type="text" class="font-color" @click="editOffLine(record)"
          >分拣台下线</a-button
        >

        <a-button type="text" class="font-color" @click="sortingEdit(record)"
          >修改</a-button
        >
        <a-popconfirm
          content="你确定要删除吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button type="text" class="font-color">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="sortingTotal"
        :current="sortingPageNum"
        :page-size="sortingPageSize"
        show-total
        show-jumper
        show-page-size
        @change="sortingChange"
        @update:page-size="sortingChangeSize"
      />
    </div>
  </a-card>
  <a-card title="接收台">
    <!-- 接收台 -->
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns2"
      :data="receiveTableData"
    >
      <template #id="{ record }">{{
        receiveTableData.indexOf(record) + 1
      }}</template>
      <template #action="{ record }">
        <a-button type="text" class="font-color" @click="receiveEdit(record)"
          >修改</a-button
        >
        <a-popconfirm
          content="你确定要删除吗?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button type="text" class="font-color">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="receiveTotal"
        :current="receivePageNum"
        :page-size="receivePageSize"
        show-total
        show-jumper
        show-page-size
        @change="receiveChange"
        @update:page-size="receiveChangeSize"
      />
    </div>
  </a-card>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .page-position {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-reset {
    margin-left: 10px;
  }
</style>
